<template>
  <div>
    <el-select
      v-model="internalSelectedSubsidyId"
      filterable
      clearable
      placeholder="请选择"
      @change="handleChange"
    >
      <el-option
        v-for="subsidy in subsidies"
        :key="subsidy.id"
        :label="subsidy.MoneyName"
        :value="subsidy.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getwatermeterbases } from '@/api/subsidytemplate.js'
export default {
  props: {
    value: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      subsidies: [],
      internalSelectedSubsidyId: this.value // Use the prop value as the initial value
    }
  },
  watch: {
    value(newValue) {
      // Whenever the prop value changes, update the internal value
      this.internalSelectedSubsidyId = newValue
    }
  },
  mounted() {
    this.fetchSubsidies()
  },
  methods: {
    async fetchSubsidies() {
      try {
        const res = await getwatermeterbases()
        this.subsidies = res.data.watermeterbases
        // If a default value is not provided, select the first option
        if (!this.value && this.subsidies.length > 0) {
          this.internalSelectedSubsidyId = this.subsidies[0].id
          this.handleChange(this.subsidies[0].id)
        }
      } catch (err) {
        console.error(err)
      }
    },
    handleChange(value) {
      // Update the internal value and emit an event to update the parent's v-model
      this.internalSelectedSubsidyId = value
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>
/* 添加任何你需要的样式 */
</style>
